<template>
    <div class="login">
        <video 
            autoplay
            muted
            loop
            playsInline
            id="myvideo"
            :src="src" 
            class="myvideo">
        </video>
        <div class="login-box">
            <h2 class="title">社区疫情管理系统</h2>
            <div class="box">
                <el-tabs v-model="activeName" class="myform" >
                    <el-tab-pane label="用户名登录" name="username">
                        <LoginByName></LoginByName>
                    </el-tab-pane>
                    <el-tab-pane label="手机号登录" name="phone">
                        <LoginByPhone></LoginByPhone>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
export default {
    setup(props){
        const state = reactive({
            activeName:'username',
            src:"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4"
        })
        
        return {
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" >
.login{
  width:100%;
  height:100%;
    .myvideo{
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 0;
    }
    .login-box{
        position: absolute;
        width:390px;
        height:420px;
        // min-height:340px;
        border:1px solid darkkhaki;
        border-radius: 8px;
        padding:15px;
        background: rgba(0, 0, 0, 0.2);
        left:0;
        right:0;
        bottom:0;
        top:0;
        margin:auto;
        .title{
            font-size:26px;
            text-align: center;
            font-weight: 500;
            color:#fff;
        }
        .box{
            margin-top:20px;
            .el-tabs__nav {
                width:100%;
                .el-tabs__active-bar{
                    background-color: darkorange;
                }
                .el-tabs__item{
                    flex:1;
                    width:50%;
                    text-align: center;
                    color:#fff;
                }
                .is-active{
                    color:darkorange;
                }
            }
            .myform{
                .el-input__icon{
                    color:#fff;
                }
                .el-input__inner{
                    background: transparent;
                    color:#fff;
                }
                 .el-form-item__label{
                    color:#fff;
                }

                .flex{
                    display: flex;
                    .btn{
                        flex:1;
                    }
                }
                .lastitem{
                    margin-bottom: 0;
                    width:100%;
                    ::v-deep .el-form-item__content{
                        line-height:1 ;
                    }
                    .alinks{
                        width:100%;
                        display: flex;
                        justify-content: space-between;
                        .litem{
                            font-size: 12px;
                            color:darkorange;
                        }
                        .color{
                            color:#fff;
                        }
                        .bg{
                            color:aqua
                        }
                    }
                }

                .btnblock{
                    width:100%;
                    margin:10px 0 0 0;
                }
            }
        }
    }
}
</style>